<template>
  <div id="app">
    <!-- 引用组件 -->
    <!-- <MainHeader></MainHeader>
    <MainTodo></MainTodo>
    <MainFooter></MainFooter> -->

    <!-- 更推荐的写法 -->
    <main-header></main-header>
    <main-todo></main-todo>
    <main-footer></main-footer>
  </div>
</template>

<script>
// 导入组件
// 为了保证风格的统一, 统一不写后缀, 打包工具会自动 识别 .js .mjs .vue
import MainHeader from './components/MainHeader'
import MainTodo from './components/MainTodo'
import MainFooter from './components/MainFooter'

export default {
  name: 'App',
  // 挂载组件
  components: {
    MainHeader,
    MainTodo,
    MainFooter,
  },
}
</script>

<style lang="stylus">
// 导入reset重置样式
// 此处的相对路径, 相对于当前的App.vue文件
// @import './assets/styles/reset.styl'
@import '~styles/reset.styl'
</style>
